<template>
  <!-- 分层详情 -->
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="层号" prop="layerNum">
        <label slot="label" v-html="`层&emsp;&emsp;号`" />
        <el-input v-model="formData.layerNum" readonly size="medium" placeholder />
      </el-form-item>
      <el-form-item label="名称" prop="setName">
        <label slot="label" v-html="`名&emsp;&emsp;称`" />
        <el-input v-model="formData.setName" size="medium" readonly placeholder="" />
      </el-form-item>
      <el-col :span="24">
        <el-form-item label="">
          <label slot="label" v-html="`描&emsp;&emsp;述`" />
          <el-input v-model="formData.describe" readonly :rows="3" type="textarea" />
        </el-form-item>
      </el-col>
    </el-form>
  </el-dialog>
</template>

<script>
// api
import { getHierarchicaSetting } from '@/api/projectManage/projectData/LayeredSettings'
export default {
  name: 'DetailDialog',
  data() {
    return {
      /* 新增 start */
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        layerNum: '',
        setName: '',
        describe: ''
      }
      /* 新增 end */
    }
  },
  methods: {
    /* 详情 start */
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getDetailById(id)
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await getHierarchicaSetting(id)
      this.formData = { ...this.formData, ...data }
    },
    // 关闭弹窗
    cancel() {
      this.resetForm('form')
      this.dialogVisible = false
    }
    /* 详情 end */
  }
}
</script>

